<template>
    <div class="LoginPasswordReset">
        <Vcode style="direction: ltr;" :imgs="[img1, img2, img3, img4, img5]" :show="show" @success="onSuccess" :canvasHeight="200"
            @close="show = false;" :sliderText="$t('拖动滑块以完成拼图')" :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" />

<!--        <van-nav-bar safe-area-inset-top fixed :title=" $t('重置密码') " left-arrow @click-left=" onClickLeft " />-->
<!--        <div style="width: 100%;" class="h46"></div>-->
      <div class="backTitle" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <span>{{ $t('资金密码') }}</span>
      </div>
        <div class="nr">
          <div class="input_row">
            <div class="biaoti"><span>*</span>{{ $t('原密码') }}</div>
            <div class="shuru">
              <el-input :placeholder=" $t('请输入原密码') " maxlength="16" v-model=" it.input1 " show-password clearable>
              </el-input>
            </div>
          </div>
          <div class="input_row">
            <div class="biaoti"><span>*</span>{{ $t('新密码') }}</div>
            <div class="shuru">
              <el-input :placeholder=" $t('请输入新密码') " maxlength="16" v-model=" it.input2 " show-password clearable>
              </el-input>
            </div>
          </div>
          <div class="input_row">
            <div class="biaoti"><span>*</span>{{ $t('确认密码') }}</div>
            <div class="shuru">
              <el-input :placeholder=" $t('请再次输入新密码') " maxlength="16" v-model=" it.input3 " show-password clearable>
              </el-input>
            </div>
          </div>



            <div class="tijiao" @click=" biaodantijiao ">{{ $t('确定') }}</div>
        </div>
    </div>
</template>
<script>
import { NavBar, Toast } from 'vant';
import { updateOldAndNewPsw } from "@/API/user";
import { isLogin } from '@/utils/utis'
import Vcode from "vue-puzzle-vcode";
import router from '@/router/router';
export default {
    data() {
        return {
            img1: require('@/assets/image/slider/1.png'),
            img2: require('@/assets/image/slider/2.png'),
            img3: require('@/assets/image/slider/3.png'),
            img4: require('@/assets/image/slider/4.png'),
            img5: require('@/assets/image/slider/5.png'),
            show: false,
            it: {
                input1: '',
                input2: '',
                input3: '',
            }
        }
    },
    components: {
        [NavBar.name]: NavBar,
        Vcode
    },
    created() {
        if (!isLogin()) {
            this.$router.push('/')
        }
    },
    methods: {
        onClickLeft() {
            this.$router.push({ path: '/me/Setting', dir: 'left' })
        },

        biaodantijiao() {
            const t = this
            if (t.it.input1 === '') {
                Toast(t.$t('请输入原密码'));
                return
            }
            if (t.it.input2 === '') {
                Toast(t.$t('请输入新密码'));
                return
            }
            const reg = /^[a-zA-Z0-9!@#$%^&*()_+{}\[\]:;'"\\|,.<>?~`\-=/]{6,12}$/;
            if (!reg.test(t.it.input2)) {
                Toast(t.$t('请输入 6-12 位由数字或字母组成的密码'));
                return;
            }
            if (t.it.input3 !== t.it.input2) {
                Toast(t.$t('两次密码输入不一致'));
                return
            }
            this.submitHandle()
            //   this.show = true
        },

        onSuccess() {
            this.submitHandle()
            this.show = false
        },

        submitHandle() {
            Toast.loading({
                duration: 0,
                message: this.$t('提交中'),
                forbidClick: true,
            })

            const params = {
                old_password: encodeURIComponent(this.it.input1),
                password: encodeURIComponent(this.it.input2),
                re_password: encodeURIComponent(this.it.input3)
            }
            updateOldAndNewPsw(params).then(async () => {
                Toast.success(this.$t('修改成功'))
                await this.$store.dispatch('getUserInfo')
                this.onClickLeft()
                // localStorage.removeItem('token')
                // this.$router.push('/login')
            }).catch(err => {
                Toast.clear()
                // Toast.fail(err.msg)
            })
        },
      goBack() {
        this.$router.push({ path: '/me/Setting' })
      }
    }
}
</script>
<style lang="scss" scoped>
.LoginPasswordReset {
    width: 100%;
  padding-bottom: 50px;
  .backTitle{
    display: flex;
    align-items: center;
    padding: 15px 15px 0 15px;
    font-size: 24px;
    color: #333333;
    font-weight: 600;
  }

    /deep/ .el-input {
        input:focus {
            //   border-color: var(--main-color);
            border-color: var(--main-color);
        }
    }

    .nr {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
      .input_row{
        display: flex;
        align-items: center;
        margin-top: 22px;
      }

        .biaoti {
          flex-shrink: 0;
            margin-right: 10px;
            font-style: normal;
            font-weight: 400;
          font-size: 14px;
          color: #606266;
            line-height: 16px;
          span{
            color: #F56C6C;
            margin-right: 4px;
          }
        }

        .shuru {
            width: 100%;
            margin-top: 5px;
        }

        .tijiao {
            margin-top: 60px;
            width: 100%;
            height: 54px;
            background: var(--main-color);
            border-radius: 4px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 54px;
            /* identical to box height, or 100% */

            text-align: center;

            color: #FFFFFF;
        }
    }
}
</style>
